import React, { useState } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Routes from './routes';
import Header from './components/Layout/Header';
import Footer from './components/Layout/Footer';
// import Sidebar from './components/Layout/Sidebar';
import './styles/Layout.css'
const App = () => {
  const [gridRow, setGridRow] = useState("auto 1fr auto")
  const getGridRow=(gridRow)=>{
    setGridRow(gridRow)
  }
  return (
    <Router>
      <div style={{ '--grid-rows': gridRow }}>
        <Header getGridRow={(type)=>getGridRow(type)}/>
        <main>
          <Routes />
        </main>
        <Footer />
      </div>
    </Router>
  );
};

export default App;